<template>
	<view>

		<view class="new-head"
			:style="{'height':110+StatusBarHeight+'rpx', 'padding-top':StatusBarHeight+10+'rpx','background-color': 'rgba(255, 255, 255, '+overlayOpacity+')'}">
			<image src="@/static/order/return.png" mode="aspectFill" @click="back" style="width: 64rpx;height: 64rpx;">
			</image>
		</view>

		<view class="nav-wrap">
			<view class="nav-img">
				<image src="../../static/homePage/bgc.png" mode="widthFix"></image>
			</view>

			<view class="user-Detail">
				<view class="user-wrap">
					<view class="user-cenent">
						<view class="user-image">
							<image :src="formDate.customer.avatar " class="user_head"></image>
						</view>

						<view class="user-name">
							{{formDate.customer.nickName}}
						</view>
					</view>
					<view class="user-follow">
						<view v-if="!isMyself&&formDate.isLogoff!=1" :class="['follow',formDate.isFavorite==1?'following':'']"
							@click.stop="changeFollowStatus">
							{{formDate.isFavorite==1?'已关注':'关注'}}
						</view>
					</view>
					<!-- 	<view class="user-gz" :class="post.isFavorite==1 ? 'HR_btn_hui':'HR_btn' "
						v-if="formDate.customer.customerId !=Info.id ">
						{{ post.isFavorite==1 ?'取消关注' :'关注'}}
					</view> -->
				</view>

				<view class="user-domain">
					<view class="user-dom">
						<view class="domain-sty">
							{{formDate.customer.followsNum || 0}}
						</view>
						<view class="domain-font">
							关注
						</view>
					</view>
					<view class="user-dom">
						<view class="domain-sty">
							{{formDate.customer.fansNum || 0}}
						</view>
						<view class="domain-font">
							粉丝
						</view>
					</view>
					<view class="user-dom">
						<view class="domain-sty">
							{{formDate.postNum || 0}}
						</view>
						<view class="domain-font">
							帖子
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="home-list pd">
			<view class="home-box" v-if="orderList&&orderList.length>0">

				<scroll-view show-scrollbar="false" scroll-y="true" :scroll-top="scrollLeftTop"
					scroll-with-animation="true">
					<view class="home-item" :id="'listItem'+(index+1)" v-for="(item,index) in orderList" :key="index" @click="onDetaile1(item,index)">
						<view class="title-time">
							{{item.createTime}} 发布
						</view>
						<!-- <view class="title_wrap">

						<text class="ht-title" @click="onDetaile(item)">{{ item.text }}
						</text>
					</view> -->
						<view :class="['contentBox',item.isShow === false?'notShow':'']">
							<!-- <view class="text"> -->
							{{item.text}}

							<view v-if="item.text.length>80" :class="['more',item.isShow=== true?'Showing':'']"
								@click.stop="changeShow(item,index)">
								{{item.isShow=== true?'收起':'展开'}}
							</view>
						</view>

						<!-- 上传的是视频时 -->
						<view class="video_wrap" v-if="item.video">
							<video :ref="'video' + item.id" :id="'video' + item.id" class="video-item" :src="item.video"
								@play="handlePlay(index,item.id)" @pause="handlePause(item.id)" controls></video>
						</view>
						<!-- {{ item.photoList.length }} -->
						<view v-if="item.photoList.length  > 0 && !item.video" class="images">
							<block v-if=" item.photoList.length>1">
								<view v-for="(img, index1) in item.photoList" :key="index1" class="item_wrap">
									<view v-if="index1<2" :class="index1 == 1?'postImage-more':'postImage_wrap'">
										<image :src="img" class="postImage" @tap.stop="onShowImg(item.photoList,index1)"
											mode="aspectFill">
										</image>
										<view class="more_wrap" v-if="item.photoList.length>2 && index1==1">
											<image src="@/static/square/more.png" mode="widthFix" class="more"></image>
											<view class="img_num">
												+{{item.photoList.length-2}}
											</view>
										</view>
									</view>
								</view>
							</block>

							<block v-if=" item.photoList.length==1">
								<view v-for="(img, index) in item.photoList" :key="index" class="item_wrap1">
									<view class="postImage-more1">
										<image :src="img" mode="widthFix" class="postImage">
										</image>
									</view>
								</view>
							</block>
						</view>


						<view class="post-footer">
							<view class="likes" @click="onLike(item)">
								<image v-show="!item.useFavorite" src="../../static/square/love.png" mode="heightFix"
									class="bubble"></image>
								<image v-show="item.useFavorite==1" src="../../static/square/loveRed.png"
									mode="heightFix" class="bubble"></image>
								<text>{{ item.favoriteNum }}</text>
							</view>
							<view class="comments" @click.stop="onRemark(item)">
								<image src="../../static/square/bubble.png" mode="heightFix" class="bubble"></image>
								<text>{{ item.commentNum }}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="nullData" v-else>
				<image src="../../static/follow/follow1.png" mode="widthFix"></image>
				<view class="txt">
					还没有发动态呢，赶快行动起来~
				</view>
			</view>
		</view>
		<u-overlay :show="modalShow" @click="modalShow = false">
			<view class="warp-lay">
				<!-- <view class="rect" @tap.stop></view> -->
				<view class="followConfirm">
					<view class="txt">
						确定不再关注Ta了吗
					</view>
					<view class="btnGroup">
						<view class="btn cancel" @click="modalShow = false">
							继续关注
						</view>
						<view class="btn confirm" @click="onCancelFollow">
							不关注
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		getStatusBarHeight,
	} from "@/utils/system.js"
	import {
		TDetailList,
		TDetailNum,
		addLike,
		// deleteFavorite,
	} from "@/api/apis.js"
	import {
		addCustomerFans,
		deleteFavorite
	} from "@/api/follow.js";
	import {
		getMinePostList
	} from "@/api/post.js"
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		data() {
			return {
				customerId: 0,
				StatusBarHeight: 0,
				scrollTop: 0, // 页面滚动的距离  
				overlayOpacity: 0, // 遮罩层的透明度  
				formDate: {
					customer: {
						avatar: ''
					},
					postNum: 0,

				},

				confrim: {
					orderStatus: null,
					pageNo: 1,
					pageSize: 3
				},
				orderList: [],

				posts: [],
				isMyself: false,
				modalShow: false,
				nowFollowId: '',
				scrollLeftTop: 0,
				realTop: 0,

			};
		},
		computed: {
			...mapState("userInfo", ["Info", 'storeId']),
		},
		onLoad(e) {
			console.log(e);
			this.customerId = e.customerId
		},
		mounted() {
			this.StatusBarHeight = getStatusBarHeight()
			// this.onUserDetail()
			// this.onSearch()
		},
		onShow() {
			this.onUserDetail()
			this.onSearch()
		},
		onPageScroll(e) {
			// 更新页面滚动的距离  
			this.scrollTop = e.scrollTop;

			// 根据滚动的距离计算遮罩层的透明度  
			// 假设最大透明度为0.8，当滚动距离超过某个阈值（比如200）时，透明度达到最大  
			const maxOpacity = 1;
			const threshold = 200;
			this.overlayOpacity = Math.min(maxOpacity, this.scrollTop / threshold);
		},

		onReachBottom() {
			if (this.isLoading) {
				console.log(this.isLoading);
				this.loadMore(); // 触底加载更多
			}
		},
		onPullDownRefresh() {
			this.refreshData(); // 下拉刷新
		},
		methods: {
			// 预览图图片
			onShowImg(item, index) {
				uni.previewImage({
					current: index,
					urls: item,
				})
			},
			// 展开记录位置，收起滚动回去
			changeShow(item, index) {
				item.isShow = !item.isShow
				console.log(index, 'i')
				let that = this
				const query = uni.createSelectorQuery().in(this);
				if (item.isShow) {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							// data.top就是元素距离顶部的高度
							console.log('元素距离顶部的高度:', data.top);
							that.realTop = data.top
						}
					}).exec();
				} else {
					query.select(`#listItem${index+1}`).boundingClientRect(data => {
						if (data) {
							that.scrollLeftTop = that.realTop
							// console.log(that.scrollLeftTop,'that.scrollLeftTop')
						}
					}).exec();
				}
			},
			onCancelFollow() {
				console.log(this.nowFollowId, 'this.nowFollowId')
				// return
				deleteFavorite({
					followerId: this.nowFollowId
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.onUserDetail()
						this.modalShow = false
						uni.showToast({
							title: '取消关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '取消关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			addFollow(id) {
				addCustomerFans({
					followerId: id
				}).then((res) => {
					console.log(res);
					if (res.success) {
						console.log(res);
						this.onUserDetail()
						uni.showToast({
							title: '关注成功',
							icon: 'success',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					} else {
						uni.showToast({
							title: '关注失败',
							icon: 'none',
							duration: 2000, //提示的延迟时间，单位毫秒，默认：1500
							mask: true, // 是否显示透明蒙层， 防止触摸穿透， 默认： false
							// image:'./image.png',//自定义图标的本地路径
						});
					}
				});
			},
			changeFollowStatus() {
				console.log(this.formDate.isFavorite, 'status')
				if (this.formDate.isFavorite == 1) {
					this.modalShow = true
					this.nowFollowId = this.formDate.customer.id
				} else {
					// 关注
					this.addFollow(this.formDate.customer.id)
				}
			},
			handlePlay() {

			},
			handlePause() {

			},
			// 查询
			onUserDetail() {
				let params = {
					customerId: this.customerId
				}
				TDetailNum(params).then(res => {
					console.log(res);
					if (res.result.customer.id == this.Info.id) {
						this.isMyself = true
					}
					this.formDate = res.result
					console.log(this.formDate.customer.avatar);
					this.$nextTick(() => {
						// this.formDate = res.result
					})
				})
			},

			// 加载更多数据
			loadMore() {
				this.confrim.pageNo++;
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
			},

			// 刷新数据
			refreshData() {
				this.confrim.pageNo = 1;
				this.squareList = []
				this.onSearch(this.confrim.pageNo, this.confrim.pageSize);
				uni.stopPullDownRefresh(); // 停止下拉刷新
			},

			// 获取订单数据
			onSearch() {
				// let params = {
				// 	...this.confrim
				// }
				// // params.userId = this.customerId
				// if (this.check == 0) {
				// 	params.orderStatus = undefined
				// } else {
				// 	params.orderStatus = this.check
				// }
				getMinePostList({
					customerId: this.customerId
				}).then(res => {
					// let records = res.result.records
					// if (records.length < this.confrim.pageSize) {
					// 	this.isLoading = false
					// } else {
					// 	this.isLoading = true
					// }
					// // for (var i = 0; i < records.length; i++) {
					// // 	let item = records[i]
					// // 	for (var j = 0; j < item.orderItemVOS.length; j++) {
					// // 		item.orderItemVOS[j].gooodsImg = JSON.parse(item.orderItemVOS[j].goodsUrl)[0]
					// // 	}
					// // }
					// this.orderList = [...this.orderList, ...records]
					// console.log(this.orderList);
					// return
					res.result.map(item => {
						item.isShow = false
					})
					this.$set(this, "orderList", res.result)
					console.log(this.orderList, 'orderList');
					uni.stopPullDownRefresh(); // 停止下拉刷新
				})
			},


			toggleExpand(item) {
				item.isExpanded = !item.isExpanded;
			},

			// 点赞 点赞业务类型 0 帖子 1 评论"
			onLike(item) {
				item.useFavorite = item.useFavorite == 1 ? 0 : 1
				if (item.useFavorite == 1) {
					item.favoriteNum++
					let params = {
						"bizId": item.id,
						"bizType": 0,
						"liked": true
					}
					this.updeta(params)
				} else {
					item.favoriteNum--
					let params = {
						"bizId": item.id,
						"bizType": 0,
						"liked": false
					}
					this.updeta(params)
				}
			},

			// 点赞
			updeta(params) {
				addLike(params).then(res => {
					console.log(res);
				})
			},

			// 评论
			onRemark(item) {
				console.log(item);
				uni.navigateTo({
					// url: `/pages/squareDetail/squareDetail?RemarkID=${item.id}`
					url: `/pages/postDetail/postDetail?id=${item.id}&isRemark=yes`
				})
			},
			back() {
				uni.navigateBack(0)
			},

			// 查看帖子详情
			onDetaile(item) {
				uni.navigateTo({
					url: `/pages/postDetail/postDetail?id=${item.id}`
				})
			},

			onDetaile1(item, index) {
				// if (index == 1) {
					uni.navigateTo({
						url: `/pages/postDetail/postDetail?id=${item.id}`
					})
				// }
			},

		}
	}
</script>

<style lang="scss" scoped>
	.pd {
		padding: 0 32rpx;
	}

	.new-head {
		position: fixed;
		width: 100%;
		height: 100rpx;
		/* 遮罩层的高度，可以根据需要调整 */
		background-color: rgba(255, 255, 255, 0);
		/* 遮罩层的颜色 */
		z-index: 9;
		/* 确保遮罩层在最上层 */
		transition: opacity 0.3s;

		/* 平滑过渡效果 */
		image {
			z-index: 999;
		}
	}

	.nav-wrap {
		position: relative;

		.nav-img {
			width: 100%;
			height: 400rpx;

			image {
				width: 100%;
			}
		}

		.user-Detail {
			position: absolute;
			bottom: -84rpx;
			box-sizing: border-box;
			padding: 0 32rpx;
			width: 100%;
			height: 208rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 24rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 24rpx;

			.user-wrap {
				margin-bottom: 12rpx;
				display: flex;
				justify-content: space-between;
				width: 100%;

				.user-cenent {
					.user-image {
						float: left;
						margin-top: -9%;
						width: 120rpx;
						height: 120rpx;
						box-shadow: 0px 4rpx 16rpx 0px rgba(0, 0, 0, 0.08);
						border-radius: 50%;
						border: 4rpx solid #FFFFFF;

						.user_head {
							height: 100%;
							width: 100%;
							border-radius: 50%;
						}
					}

					.user-name {
						float: left;
						margin-left: 24rpx;
						margin-top: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}
				}

				.user-follow {
					// display: flex;
					// align-items: center;
					padding-top: 20rpx;

					.follow {
						font-size: 28rpx;
						padding: 8rpx 25rpx;
						border-radius: 30rpx;
						// border: 1px solid #B6AFF6;
						background-image: linear-gradient(to right, #B2ADF8, #C2CFF1, #D3CAF8);
						// color: $uni-text-color-red;
						color: #fff;
						margin-right: 20rpx;
						box-sizing: border-box;
					}

					.following {
						border: 1px solid #7c7c7c;
						background: none;
						color: #7c7c7c;
						box-sizing: border-box;
					}
				}

				.user-gz {
					margin-top: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 96rpx;
					height: 44rpx;
					background: $uni-color-theme;
					border-radius: 22rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.user-gz-hui {
					margin-top: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 44rpx;
					background: #FFFFFF;
					border-radius: 22rpx;

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}

			.user-domain {
				display: flex;
				padding: 0 152rpx;
				justify-content: space-between;

				.user-dom {
					.domain-sty {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #232323;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.domain-font {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}

	}

	.home-list {
		margin-top: 114rpx;

		.home-item {
			margin-bottom: 64rpx;

			// 发布
			.title-time {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(51, 51, 51, 0.6);
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			.title_wrap {
				position: relative;
				margin-bottom: 12rpx;
				margin-top: 12rpx;

				// .title-time {
				// 	font-family: PingFang SC, PingFang SC;
				// 	font-weight: 400;
				// 	font-size: 24rpx;
				// 	color: rgba(51, 51, 51, 0.6);
				// 	line-height: 40rpx;
				// 	text-align: left;
				// 	font-style: normal;
				// 	text-transform: none;
				// }

				.ht-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;

					display: -webkit-box;
					-webkit-line-clamp: 4;
					/* 限制显示4行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;

					.ht_btn {
						color: #4B7DFF;
						font-weight: 400;
						text-align: right;
						font-size: 28rpx;
						width: 140rpx;
						height: 40rpx;
						position: absolute;
						bottom: 0;
						right: 0;
						border: none;
						background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
						padding: 5rpx 10rpx;
						cursor: pointer;
					}
				}
			}

			// 展开
			.expanded .ht-title {
				-webkit-line-clamp: none;
				-webkit-box-orient: horizontal;
				/* 展开时取消行数限制 */
				height: auto;
				/* 展开时高度自动 */
			}

			.contentBox {
				// .txt{}
				position: relative;
				font-size: 29rpx;
				letter-spacing: 2rpx;
				line-height: 45rpx;
				margin: 20rpx 0;
				// word-break: break-all;
				word-break: break-word;




				.more {
					// display: inline-block;
					position: absolute;
					bottom: 0;
					right: 0;
					background-color: #fff;
					color: #4B7DFF;

					&::before {
						position: absolute;
						right: 100%;
						content: "";
						width: 142rpx;
						height: 44rpx;
						background-image: linear-gradient(270deg, #fff, hsla(0, 0%, 100%, 0.2));
					}
				}

				.Showing {
					position: inherit;

					&::before {
						position: inherit;
						content: "";
						width: 0;
						height: 0;
						background-image: none;
					}
				}
			}

			.notShow {
				// height: 300rpx;
				// overflow: hidden;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 4;
				-webkit-box-orient: vertical;
				// word-break: break-all;
				word-break: break-word;



			}

			// 图片
			.images {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item_wrap {
					width: 49%;
				}

				.item_wrap1 {
					width: 100%;

					.postImage-more1 {
						margin-top: 10rpx;
						/* 或者指定具体的像素值 */
						width: 100%;
						/* 示例高度 */
						object-fit: cover;
						display: block;
					}
				}

				.more_wrap {
					position: absolute;
					height: auto;
					display: flex;
					bottom: 12rpx;
					right: 12rpx;
					z-index: 1;
					width: 68rpx;
					height: 28rpx;
					background: #000000;
					border-radius: 4rpx;
					opacity: 0.6;
					padding: 4rpx 8rpx;
					justify-content: space-between;
					align-items: center;

					.more {
						height: 20rpx;
						width: 20rpx;
					}

					.img_num {
						color: #fff;
						font-size: 20rpx;
					}
				}


				.postImage_wrap {
					border-radius: 12rpx;
					margin-top: 10rpx;
					/* 或者指定具体的像素值 */
					height: 296rpx;
					/* 示例高度 */
					overflow: hidden;
					object-fit: cover;
					display: block;
				}

				.postImage-more {
					border-radius: 12rpx;
					position: relative;
					margin-top: 10rpx;
					/* 或者指定具体的像素值 */
					height: 296rpx;
					border-radius: 12rpx;
					/* 示例高度 */
					overflow: hidden;
					object-fit: cover;
					display: block;

				}

				/* 移除图片底部的小间隙 */
				.postImage {
					// height: 100%;
					width: 100%;
				}


				// 图片
				.video_wrap {

					position: relative;
					margin-top: 24rpx;
					text-align: center;

					.video-item {
						position: absolute;
						z-index: 1;
					}
				}
			}

			// 底部
			.post-footer {
				margin-top: 40rpx;
				display: flex;
				justify-content: end;

				.comments,
				.likes {
					display: flex;
					justify-content: end;
					align-items: center;
					font-weight: 400;
					font-size: 22rpx;
					color: #BABABA;

					.bubble {
						width: 44rpx;
						height: 44rpx;
					}
				}

				.comments {
					margin-left: 46rpx;
					margin-right: 32rpx;
				}
			}


		}

		.nullData {
			width: 100%;
			margin-top: 300rpx;

			image {
				width: 35%;
				margin: 0 auto;
				display: block;
			}

			.txt {
				text-align: center;
				color: #8C8EA0;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}
	}

	.warp-lay {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.followConfirm {
			width: 70%;
			// height: 250rpx;
			padding: 45rpx 45rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;

			.txt {
				text-align: center;
				margin-bottom: 45rpx;
			}

			.btnGroup {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 100%;

				.btn {
					padding: 18rpx 0rpx;
					border-radius: 35rpx;
					border: 0;
					font-size: 26rpx;
					width: 46%;
					text-align: center;
				}

				.cancel {
					background-color: #EDEDED;
					color: #4D4D4D;
				}

				.confirm {
					background-image: linear-gradient(to right, #FF4C6E, #FE2C55);
					color: #fff;
				}
			}
		}
	}
</style>
